<script setup lang="ts">
import { ref, computed } from 'vue'

interface Props {
  title: string
  description?: string
  template: string
  script?: string
  style?: string
  language?: string
  showCode?: boolean
  showPreview?: boolean
  previewHeight?: string
  codeHeight?: string
}

const props = withDefaults(defineProps<Props>(), {
  description: '',
  language: 'vue',
  showCode: true,
  showPreview: true,
  previewHeight: 'auto',
  codeHeight: '400px',
})

// 定义插槽类型
defineSlots<{
  preview: () => any
}>()

const showCodePanel = ref(props.showCode)
const showPreviewPanel = ref(props.showPreview)

// 切换代码面板显示
const toggleCodePanel = () => {
  showCodePanel.value = !showCodePanel.value
}

// 切换预览面板显示
const togglePreviewPanel = () => {
  showPreviewPanel.value = !showPreviewPanel.value
}

// 生成完整代码
const fullCode = computed(() => {
  let code = ''

  if (props.script) {
    code += '<' + 'script setup lang="ts">\n' + props.script + '\n</' + 'script>\n\n'
  }

  code += '<template>\n' + props.template + '\n</template>\n'

  if (props.style) {
    code += '\n<style scoped>\n' + props.style + '\n</style>'
  }

  return code
})

// 复制代码
const copyCode = async () => {
  try {
    await navigator.clipboard.writeText(fullCode.value)
    console.log('代码已复制到剪贴板')
  } catch (err) {
    console.error('复制失败:', err)
  }
}

// 计算面板样式
const codePanelStyle = computed(() => ({
  height: showCodePanel.value ? props.codeHeight : '0px',
  overflow: showCodePanel.value ? 'auto' : 'hidden',
}))

const previewPanelStyle = computed(() => ({
  height: showPreviewPanel.value ? props.previewHeight : '0px',
  overflow: showPreviewPanel.value ? 'auto' : 'hidden',
}))
</script>

<template>
  <div
    class="code-demo-container bg-base-100 rounded-2xl border border-base-300/30 shadow-lg overflow-hidden"
  >
    <!-- 头部 -->
    <div
      class="demo-header bg-gradient-to-r from-base-200 to-base-300/50 px-6 py-4 border-b border-base-300/30"
    >
      <div class="flex items-center justify-between">
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-base-content mb-1">{{ title }}</h3>
          <p v-if="description" class="text-sm text-base-content/70">{{ description }}</p>
        </div>

        <!-- 控制按钮 -->
        <div class="flex items-center gap-2">
          <button
            v-if="showPreview"
            @click="togglePreviewPanel"
            class="btn btn-sm btn-ghost gap-2"
            :class="{ 'btn-primary': showPreviewPanel }"
          >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
              />
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
              />
            </svg>
            预览
          </button>

          <button
            v-if="showCode"
            @click="toggleCodePanel"
            class="btn btn-sm btn-ghost gap-2"
            :class="{ 'btn-primary': showCodePanel }"
          >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
              />
            </svg>
            代码
          </button>

          <button
            v-if="showCode && showCodePanel"
            @click="copyCode"
            class="btn btn-sm btn-ghost gap-2"
            title="复制代码"
          >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- 预览面板 -->
    <div
      v-if="showPreview"
      class="preview-panel transition-all duration-300 ease-in-out"
      :style="previewPanelStyle"
    >
      <div class="p-6">
        <slot name="preview">
          <!-- 默认预览内容 -->
          <div class="text-center text-base-content/60 py-8">
            <svg
              class="w-12 h-12 mx-auto mb-4 opacity-50"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
              />
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
              />
            </svg>
            <p>请提供预览内容</p>
          </div>
        </slot>
      </div>
    </div>

    <!-- 代码面板 -->
    <div
      v-if="showCode"
      class="code-panel transition-all duration-300 ease-in-out"
      :style="codePanelStyle"
    >
      <div
        class="code-header bg-base-200 px-4 py-2 border-b border-base-300/30 flex items-center justify-between"
      >
        <div class="flex items-center gap-2">
          <div class="flex gap-1">
            <div class="w-3 h-3 rounded-full bg-red-400"></div>
            <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
            <div class="w-3 h-3 rounded-full bg-green-400"></div>
          </div>
          <span class="text-sm text-base-content/60 font-mono">{{ language }}</span>
        </div>
        <button @click="copyCode" class="btn btn-xs btn-ghost gap-1" title="复制代码">
          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
            />
          </svg>
          复制
        </button>
      </div>

      <div class="code-content">
        <pre class="code-block"><code :class="'language-' + language">{{ fullCode }}</code></pre>
      </div>
    </div>
  </div>
</template>

<style scoped>
.code-demo-container {
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
}

.code-content {
  background: hsl(var(--b1));
  overflow-x: auto;
}

.code-block {
  margin: 0;
  padding: 1rem;
  background: transparent;
  font-family: 'Fira Code', 'Monaco', 'Consolas', 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  color: hsl(var(--bc));
  overflow-x: auto;
}

.code-block code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}

/* 语法高亮样式 */
.language-vue {
  color: #42b883;
}

.language-html {
  color: #e34c26;
}

.language-css {
  color: #1572b6;
}

.language-javascript {
  color: #f7df1e;
}

.language-typescript {
  color: #3178c6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .demo-header {
    padding: 1rem;
  }

  .code-panel,
  .preview-panel {
    padding: 0.5rem;
  }

  .code-block {
    font-size: 0.75rem;
    padding: 0.75rem;
  }
}

/* 过渡动画 */
.preview-panel,
.code-panel {
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 滚动条样式 */
.code-content::-webkit-scrollbar {
  height: 8px;
}

.code-content::-webkit-scrollbar-track {
  background: hsl(var(--b2));
}

.code-content::-webkit-scrollbar-thumb {
  background: hsl(var(--b3));
  border-radius: 4px;
}

.code-content::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--bc) / 0.3);
}
</style>
